<template>
  <div
    class="echart"
    id="mychart"
    :style="myChartStyle"
    style="position: absolute; top: 15px; left: 5px"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      xData: ["2018年", "2019年", "2020年", "2021年"], //横坐标
      yData: [75, 176, 458, 853], //数据
      myChartStyle: { float: "left", width: "350px", height: "320px" }, //图表样式
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData,
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
